<template>
    <div class="page">
        <div class="page-top">
            <!-- 面包屑 -->
            <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
        </div>
        <div class="page-content">
            <a-form-model layout="inline" style="margin-bottom: 20px" :form="form" @submit="handleSubmit">
                <a-form-model-item label="创建时间">
                    <a-range-picker show-time format="YYYY-MM-DD HH:mm:ss" v-model="timeValue" @change="bindTime" />
                </a-form-model-item>
                <a-form-model-item label="类型">
                    <a-select default-value="全部" style="width: 100px" v-model="form.type">
                        <a-select-option value=""> 全部 </a-select-option>
                        <a-select-option value="DUIHUAN"> 兑换 </a-select-option>
                        <a-select-option value="TUIGUANG"> 推广 </a-select-option>
                        <a-select-option value="TIXIAN"> 提现 </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" html-type="submit"> 提交 </a-button>
                    <a-button style="margin-left: 15px" @click="bindReset">
                        重置
                    </a-button>
                </a-form-model-item>
            </a-form-model>
            <a-table :columns="columns" :data-source="data" :loading="loading" :pagination="pagination"
                @change="handleTableChange">
                <span slot="type" slot-scope="text, record">
                    {{text == 'DUIHUAN' ? '积分兑换' : text == 'TUIGUANG' ? '推广奖励' : text == 'TIXIAN' ? '提现' : text == 'CHAE' ? '提成' : text == 'TIXIANBACK' ? '提现驳回' : ''}}
                </span>
            </a-table>
        </div>
    </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { getMoneyDetails } from "@/request/api";
export default {
    data() {
        return {
            loading: false,
            hreadcrumbAry: [
                { name: "首页", path: "/", query: {} },
                { name: "代理管理", path: "", query: {} },
                { name: "代理用户资金明细列表", path: "/money", query: {} },
            ],
            columns: [
                {
                    title: "创建日期",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: "ID",
                    dataIndex: "id",
                    key: "id",
                },
                {
                    title: "用户名",
                    dataIndex: "scsUser.name",
                    key: "scsUser.name",
                },
                {
                    title: "金额",
                    dataIndex: "money",
                    key: "money",
                },
                {
                    title: "类型",
                    dataIndex: "type",
                    key: "type",
                    slots: { title: "类型" },
                    scopedSlots: { customRender: "type" },
                },

                //   {
                //     title: "操作",
                //     dataIndex: "options",
                //     key: "options",
                //     width: 260,
                //     slots: { title: "操作" },
                //     scopedSlots: { customRender: "options" },
                //   },
            ],
            pagination: { current: 1, size: 10 },
            data: [],
            form: {
                type: '',
                startTime: "",
                endTime: "",
            },

            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
            timeValue: undefined,
            current: '',
            visible: false
        };
    },
    components: {
        Hreadcrumb,
    },
    created() {
        this.getMoneyDetails(1, 10);
    },
    beforeCreate() {
    },
    methods: {
        async getMoneyDetails(p, ps) {
            this.loading = true;
            let { startTime, endTime, type } = this.form;
            let params =
                "p=" +
                (p - 1) +
                "&ps=" +
                ps + 
                "&startTime=" + 
                startTime + 
                "&endTime=" + 
                endTime + 
                "&type=" + 
                type
            let { data } = await getMoneyDetails(params);
            console.log(data);
            if (data.success) {
                this.loading = false;
                let pagination = { ...this.pagination };
                pagination.total = data.content.totalElements;
                this.pagination = pagination;
                this.data = data.content.content;
            } else {
                this.loading = false;
                this.data = [];
            }
        },
        
        onSubmit() {
            console.log(this.current)
        },
        handleTableChange(pagination) {
            console.log(pagination);
            const pager = { ...this.pagination };
            pager.current = pagination.current;
            this.pagination = pager;
            this.getAgentList(pager.current, pager.size);
        },
        handleSubmit(e) {
            e.preventDefault();
            // console.log(this.form);
            this.getMoneyDetails(1, 10);
        },
        bindTime(date, dateString) {
            console.log(date, dateString);
            this.form.startTime = dateString[0];
            this.form.endTime = dateString[1];
        },
        bindReset() {
            this.form = {
                type: "",
                startTime: "",
                endTime: "",
            };
            this.timeValue = undefined;
            this.getMoneyDetails(1, 10);
        },
        show(record) {
            this.visible = true
            this.current = record.id
        },
        handleCancel() {
            this.visible = false
            this.current = ''
        }
    },
};
</script>
<style>
.page-content {
    background-color: #fff;
    padding: 25px;
}
</style>